<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>动感猜数字 - 高级版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Press+Start+2P&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
  </head>
  <body>
    <div class="bg-overlay"></div>

    <main class="container">
      <header class="header">
        <h1 class="title">动感猜数字</h1>
        <p class="subtitle">
          {% if difficulty == 'custom' %}
            自定义范围：{{ min_range }}~{{ max_range }}
          {% else %}
            {{ difficulties[difficulty].label }}
          {% endif %}
          | 最优策略：{{ optimal_guesses }} 次内可解
        </p>
      </header>

      <section class="panel glass">
        <!-- 难度选择 -->
        <div class="difficulty-selector">
          <form method="post" class="difficulty-form">
            <input type="hidden" name="set_difficulty" value="1" />
            <label class="label">选择难度：</label>
            <select name="difficulty" class="difficulty-select" onchange="this.form.submit()">
              {% for key, diff in difficulties.items() %}
              <option value="{{ key }}" {% if difficulty == key %}selected{% endif %}>
                {{ diff.label }}
              </option>
              {% endfor %}
            </select>
          </form>

          <form method="post" class="custom-range-form">
            <input type="hidden" name="set_custom" value="1" />
            <label class="label">自定义范围：</label>
            <div class="range-inputs">
              <input
                type="number"
                name="min_range"
                class="range-input"
                placeholder="最小值"
                value="{{ min_range }}"
                min="1"
                required
              />
              <span class="range-separator">-</span>
              <input
                type="number"
                name="max_range"
                class="range-input"
                placeholder="最大值"
                value="{{ max_range }}"
                required
              />
              <button type="submit" class="btn small">设置</button>
            </div>
          </form>
        </div>

        <!-- 猜测表单 -->
        <form method="post" class="guess-form">
          <label for="guess" class="label">输入你的猜测：</label>
          <div class="input-row">
            <input
              type="number"
              id="guess"
              name="guess"
              class="guess-input"
              placeholder="{{ min_range }} ~ {{ max_range }}"
              min="{{ min_range }}"
              max="{{ max_range }}"
              autofocus
              required
            />
            <button type="submit" class="btn primary">
              发射！
            </button>
          </div>
        </form>

        <!-- 统计信息 -->
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-label">已猜测</div>
            <div class="stat-value">{{ attempts }}</div>
          </div>
          <div class="stat-card">
            <div class="stat-label">最优</div>
            <div class="stat-value">{{ optimal_guesses }}</div>
          </div>
          <div class="stat-card">
            <div class="stat-label">总局数</div>
            <div class="stat-value">{{ stats.total_games }}</div>
          </div>
          <div class="stat-card">
            <div class="stat-label">平均</div>
            <div class="stat-value">{{ stats.average_attempts }}</div>
          </div>
        </div>

        <!-- 状态行 -->
        <div class="status-row">
          {% if stats.total_games > 0 %}
          <div class="attempts">
            最佳记录：{{ stats.best_attempts }} 次 | 最差：{{ stats.worst_attempts }} 次
          </div>
          {% else %}
          <div class="attempts">
            开始你的第一次挑战吧！
          </div>
          {% endif %}

          {% if status == 'success' %}
          <div class="badge badge-success">MISSION COMPLETE</div>
          {% elif attempts > optimal_guesses * 1.5 %}
          <div class="badge badge-warning">可以更优哦～</div>
          {% else %}
          <div class="badge badge-playing">SCANNING...</div>
          {% endif %}
        </div>

        <!-- 消息区域 -->
        <div class="message-area">
          {% if message %}
          <div class="message">{{ message }}</div>
          {% else %}
          <div class="message message-muted">
            小提示：使用二分查找法，每次猜中间值！最佳次数：{{ optimal_guesses }} 次
          </div>
          {% endif %}

          {% if hint %}
          <div class="hint">{{ hint }}</div>
          {% endif %}
        </div>

        <!-- 操作按钮 -->
        <div class="actions">
          <a href="{{ url_for('reset') }}" class="btn ghost">
            再来一局
          </a>
          <button class="btn secondary" onclick="showHistory()">
            历史记录
          </button>
        </div>
      </section>

      <!-- 历史记录弹窗 -->
      <div id="history-modal" class="modal" style="display: none;">
        <div class="modal-content">
          <span class="modal-close" onclick="closeHistory()">&times;</span>
          <h2>游戏历史记录</h2>
          <div id="history-list"></div>
        </div>
      </div>
    </main>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
  </body>
</html>

